<template>
    <custom-page-box>
        <div class="success-case-container">
            <div class="search-box">
                <a-button @click="toAdd">添加案例</a-button>
            </div>
            <div class="table">
                <a-table :data-source="tableData" rowKey="id" :pagination="false">
                    <a-table-column key="x" title="序号" width="60px">
                        <template slot-scope="text, record, index">
                            <span>{{ (pageIndex - 1) * pageSize + index + 1 }}</span>
                        </template>
                    </a-table-column>
                    <a-table-column title="案例名称" data-index="name" width="80px" :ellipsis="true">
                        <template slot-scope="text, record">
                            <a-button type="link">
                                <nuxt-link
                                    target="_self"
                                    :to="{
                                        name: 'success-case-id',
                                        params: { id: record.id }
                                    }"
                                >
                                    {{ record.name }}
                                </nuxt-link>
                            </a-button>
                        </template>
                    </a-table-column>
                    <a-table-column
                        key="address"
                        title="案例地址"
                        data-index="address"
                        width="120px"
                        :ellipsis="true"
                    />
                    <a-table-column
                        key="serviceKind"
                        title="类目"
                        data-index="serviceKind"
                        width="200px"
                        :ellipsis="true"
                    />
                    <a-table-column
                        key="finishedTime"
                        title="案例完成时间"
                        data-index="finishedTime"
                        width="100px"
                        :ellipsis="true"
                    />
                    <a-table-column key="status" title="状态" data-index="status" width="100px" :ellipsis="true">
                        <template slot-scope="text, record">
                            <span
                                :class="{
                                    'red-txt': record.status === 2,
                                    'green-txt': record.status === 1,
                                    'orange-txt': record.status === 0
                                }"
                            >{{ record.status | getStatus }}</span>
                        </template>
                    </a-table-column>
                    <a-table-column key="c" title="操作" width="120px">
                        <template slot-scope="text">
                            <a-button @click="toEdit(text)" class="green">编辑</a-button>
                            <a-button @click="toDelete(text)" class="red">删除</a-button>
                        </template>
                    </a-table-column>
                </a-table>
            </div>
        </div>
        <custom-pagination
            :total="Number(total)"
            :page.sync="pageIndex"
            :limit.sync="pageSize"
            @pagination="getTable"
        ></custom-pagination>
    </custom-page-box>
</template>

<script>
export default {
    name: 'SuccessCase',
    filters: {
        getStatus (val) {
            switch (val) {
            case 0:
                return '待审核'
            case 1:
                return '审核通过'
            case 2:
                return '审核驳回'
            }
        }
    },
    beforeRouteEnter (to, from, next) {
        next(async (vm) => {
            const falg = await vm.getCompanyInfo()
            if (!falg) {
                vm.$confirm({
                    title: '提示',
                    content: '请先完善公司资料',
                    okText: '好的',
                    okType: 'primary',
                    onOk () {
                        vm.$router.replace('/company-manage/company-info')
                    },
                    onCancel () {
                        vm.$router.replace(from.path)
                    }
                })
            }
        })
    },
    data () {
        return {
            total: 0,
            pageIndex: 1,
            pageSize: 10,
            tableData: []
        }
    },
    created () {
        this.getTable()
        this.getCompanyInfo()
    },
    methods: {
        async getCompanyInfo () {
            const res = await this.$ApiServer['company/mange/detail']()
            if (res.code === 200) {
                if (res.data.logo) {
                    return true
                } else {
                    return false
                }
            }
        },
        toAdd () {
            this.$router.push('/success-case/update')
        },
        async getTable () {
            const res = await this.$ApiServer['case/getTable']({
                currentPage: this.pageIndex,
                pageSize: this.pageSize
            })
            if (res.code === 200) {
                this.tableData = res.data.records || []
                this.total = res.data.total
            } else {
                this.$message.error(res.message)
            }
        },
        toEdit (row) {
            this.$router.push({
                path: '/success-case/update',
                query: {
                    id: row.id
                }
            })
        },
        toDelete (row) {
            this.$confirm({
                title: '提示',
                content: '确认是否删除案例[' + row.name + ']',
                okText: '确认',
                cancelText: '取消',
                onOk: async () => {
                    const res = await this.$ApiServer['case/deleteCase']({
                        id: row.id
                    })
                    if (res.code === 200) {
                        this.getTable()
                        this.$message.success(res.message)
                    } else {
                        this.$message.error(res.message)
                    }
                },
                onCancel () {}
            })
        }
    }
}
</script>

<style scoped lang="less">
.success-case-container {
    border-radius: 6px;
    overflow: hidden;
    .search-box {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background: #fff;
        padding: 10px 20px;
        border-bottom: 1px solid #f3f3f3;
        button {
            color: #fff;
            height: 30px;
            background: @primary-color;
            border-radius: 2px;
            border-color: @primary-color;
        }
    }
    .table {
        padding: 20px;
        height: calc(100vh - 60px - 10px - 51px - 20px - 50px);
        background: #fff;
        .red-txt {
            color: #fd5454;
        }
        .green-txt {
            color: @primary-color;
        }
        .orange-txt {
            color: #f3993c;
        }
    }
}
::v-deep {
    .pagination {
        margin-top: 10px;
    }
    .ant-table-thead > tr:first-child > th:first-child {
        border-radius: 0;
    }
    .ant-table-thead > tr:first-child > th:last-child {
        border-radius: 0;
    }
    .ant-btn-link a {
        color: @primary-color !important;
        &:hover {
            text-decoration: underline;
        }
    }
}
</style>
